<template>
    <div>
        <!-- 搜索区 -->
        <el-form :inline="true" size="small" ref="form" label-width="80px" >
            <el-form-item label="物品类型">
                <el-select v-model="params.type" placeholder="请选择" clearable>
                    <el-option v-for="item in goods" :key="item.id" :label="item.name" :value="item.name"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="关键字">
                <el-input v-model="params.name" placeholder="请输入关键字" clearable></el-input>
            </el-form-item>
        </el-form>

        <!-- 表格 -->
        <el-table :data="inventory.list" border style="width: 100%" size="small">
            <el-table-column fixed type="index" label="序号" width="80"></el-table-column>
            <el-table-column fixed prop="name" label="物品名称" width="150"></el-table-column>
            <el-table-column prop="code" label="物品编码" width="120"></el-table-column>
            <el-table-column prop="brand" label="品牌" width="100"></el-table-column>
            <el-table-column prop="specification" label="规格型号" width="120"></el-table-column>
            <el-table-column prop="type" label="类型" width="120"></el-table-column>
            <el-table-column prop="price" label="单价" width="80"></el-table-column>
            <el-table-column prop="num" label="数量" width="80"></el-table-column>
            <el-table-column prop="date" label="介绍" width="300"></el-table-column>
            <el-table-column label="操作" align="center" width="120" fixed="right">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="receiveHandler(scope.row)">领用</el-button>
                    <el-button type="text" size="small" @click="borrowHandler(scope.row)">借用</el-button>
                    <el-button type="text" size="small" @click="purchaseHandler(scope.row)">申购</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页 -->
        <el-pagination
            layout="total, prev, pager, next"
            @current-change="pageHandler"
            :page-size="inventory.pageSize"
            :current-page="inventory.page"
            :total="inventory.total">
        </el-pagination>

        <!-- 入库模态框 -->
        <el-dialog :title="title" :visible.sync="dialogVisible" width="60%">
            {{form}}
            <el-form ref="form" :model="form" label-width="80px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="物品编号">
                            <el-input v-model="form.code"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="物品类型">
                            <el-select v-model="form.type" placeholder="请选择" clearable>
                                <el-option v-for="item in goods" :key="item.id" :label="item.name" :value="item.name"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="物品名称">
                            <el-input v-model="form.name"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="规格型号">
                            <el-input v-model="form.specification"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="品牌">
                            <el-input v-model="form.brand"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="单价">
                            <el-input v-model="form.price"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="总数量">
                            <el-input v-model="form.num"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="经办人">
                            {{userInfo.realname}}
                        </el-form-item>
                    </el-col>
                </el-row>
                <!-- <el-form-item label="图片">
                    <el-input type="textarea" v-model="form.description"></el-input>
                </el-form-item> -->
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="saveStorageHandler">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 批量入库 -->
        <el-dialog title="批量入库" :visible.sync="batchDialogVisible" width="60%">
            {{batchForm}}
            <el-form ref="form" :model="batchForm" label-width="80px">
                <p>1. 下载模板：下载模板后根据模板要求进行填写</p>
                <el-link class="download" :underline="false">下载</el-link>
                <p>2. 批量导入：导入编辑好的物品列表</p>

                <div class="warn">注意：点击确定后完成批量导入！不要重复导入！不要修改模板！ excel中的数据格式必须为文本 </div>
                
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="batchDialogVisible = false">取 消</el-button>
                <el-button size="small" type="primary" @click="saveBatchHandler">确 定</el-button>
            </span>
        </el-dialog>

        <!-- 详情 -->
        <el-dialog title="物品详情" :visible.sync="detailsDialogVisible" width="50%">
            <el-form ref="form" :model="detailsForm" label-width="80px">
                <el-form-item label="物品编号">
                    <div>{{goods_row.code}}</div>
                </el-form-item>
                <el-form-item label="物品名称">
                    <div>{{goods_row.name}}</div>
                </el-form-item>
                <el-form-item label="品牌">
                    <div>{{goods_row.brand}}</div>
                </el-form-item>
                <el-form-item label="规格参数">
                    <div>{{goods_row.specification}}</div>
                </el-form-item>
                <el-form-item label="类型">
                    <div>{{goods_row.type}}</div>
                </el-form-item>
                <el-form-item label="单价">
                    <div>{{goods_row.price}}</div>
                </el-form-item>
                <el-form-item label="数量">
                    <div>{{goods_row.num}}</div>
                </el-form-item>
                <div class="details_img">
                    <img :src="goods_row.picture" alt="">
                </div>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button size="small" @click="detailsDialogVisible = false">关闭</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import qs from 'qs'
export default {
    data() {
        return {
            inventory:[],
            params: {
                page: 1,
                pageSize: 5
            },
            goods: [],
            dialogVisible: false,
            title: '',
            form: {},
            userInfo:'',
            detailsForm: {},
            detailsDialogVisible: false,
            goods_row: '',
            batchDialogVisible: false,
            batchForm: {}
        }
    },
    created() {
        // 分页查询物品信息
        this.queryAsset(this.params)

        // 查询所有物品类型
        this.findAllGoods()

        // 获取经办人信息
        this.InfoByToken()
    },

    watch: {
        params: {
            handler: function() {
                this.queryAsset(this.params)
            },
            deep: true
        }
    },

    methods: {
        // 详情
        detailsHandler(row) {
            this.detailsDialogVisible = true
            this.goods_row = row
        },
        // 删除
        deleteHandler(id) {
            this.axios.get("/asset/deleteById",{params: {id}}).then(res => {
                if(res.data.status == 200) {
                    this.queryAsset(this.params)
                    this.$notify({
                        title: '成功',
                        message: res.data.message,
                        type: 'success'
                    });
                } else {
                    this.$notify.error({
                        title: '错误',
                        message: res.data.message
                    });
                }
            })
        },

        // 修改
        editHandler(row) {
            this.form = row;
            this.title = "修改物品信息";
            this.dialogVisible = true
        },

        // 获取经办人信息
        // 根据token获取用户信息
        InfoByToken() {
            var token = localStorage.getItem('token')
            this.axios({
                type:"get",
                url:"http://39.96.21.48:8888/user/info",
                headers: {
                "Authorization":token
                },
                params: {token}
            }).then(res => {
                this.userInfo = res.data.data
            })
        },

        // 确认入库
        saveStorageHandler() {
            this.axios.post("/asset/saveOrUpdate",qs.stringify(this.form)).then(res => {
                this.dialogVisible = false;
                this.queryAsset(this.params)
            })
        },

        // 入库
        putInStorageHandler() {
            this.dialogVisible = true;
            this.title = "新增物品信息";
            this.form = {}
        },

        // 确认批量入库
        saveBatchHandler() {

        },

        // 批量入库
        batchPutInStorageHandler() {
            this.batchDialogVisible = true
        },

        // 查询所有物品类型
        findAllGoods() {
            this.axios.get("/assetType/findAll").then(res => {
                this.goods = res.data.data
            })
        },
        // 分页查询
        queryAsset() {
            this.axios.get("/asset/pageQuery",{params: this.params}).then(res => {
                this.inventory = res.data.data
            })
        },

        // 分页
        pageHandler(page) {
            this.params.page = page
        }
    }
}
</script>

<style scoped>
    .warn {
        color: #ff0000;
        font-size: 12px;
    }
    .download {
        color: #51c1d9;
        margin: 1rem 0 1rem 1rem;
    }
    .download:hover {
        color: #85d3e4;
    }
    .el-table {
        margin-top: 1rem;
    }
    .el-form-item >>> .el-form-item__label {
        height: 30px;
    }
    .el-form-item__content {
        height: 30px;
    }
    .details_img {
        /* float:right; */
        border: 1px solid #ccc;
        width: 120px;
        height: 120px;
        position: absolute;
        top: 6rem;
        right: 4rem;
        border-radius: 5px;
        padding: 5px;
    }
    .details_img img {
        width: 110px;
        height: 110px;
    }
    .el-dialog__body {
        position: relative;
    }
    .el-form-item {
        margin-bottom: 0;
        height: 30px;
    }
    .el-icon-edit {
        margin: 0 .5rem;
    }
    .el-dialog__wrapper >>> .el-dialog__header{
        background-color: #55c1d9;
    }
    .el-dialog__wrapper >>> .el-dialog__header span,.el-dialog__wrapper >>> .el-icon-close{
        color: #fff;
    }
</style>